<template>
  <div class="grid-group">
    <van-grid :border="false">
      <van-grid-item v-for="(item, index) in grids" :key="index" :text="item.name" :to="item.to">
        <template #icon>
          <img class="icon" :src="item.icon" />
        </template>
      </van-grid-item>
    </van-grid>
  </div>
</template>

<script>
import Vue from 'vue'
import { Grid, GridItem } from 'vant'

Vue.use(Grid)
Vue.use(GridItem)

const grids = [
  { icon: '', name: '我的足迹', to: { name: 'mine-history' } },
  { icon: '', name: '优惠券', to: { name: 'mine-coupon' } },
  { icon: '', name: '我的收藏', to: { name: 'mine-collection' } },
  { icon: '', name: '订单管理', to: { name: 'mine-order' } },
  { icon: '', name: '智能评测' },
  { icon: '', name: '积分商城' },
  { icon: '', name: '我的资讯' },
  { icon: '', name: '邀请有礼' }
]

export default {
  data() {
    return {
      grids
    }
  }
}
</script>

<style lang="less" scoped>
.grid-group {
  /deep/ .van-grid-item__text {
    margin-top: 10.5px;
    color: #666666;
    font-size: 14px;
  }

  /deep/ .van-grid-item__content {
    padding: 19px 8px;
  }

  .icon {
    width: 25px;
    height: 25px;
  }
}
</style>